﻿<!DOCTYPE html>
<html>
<head>
    <title>表单验证</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link href=".\jquery-easyui-1.4.3\themes\icon.css" rel="stylesheet" />
    <link href=".\jquery-easyui-1.4.3\themes\default\easyui.css" rel="stylesheet" />
    <script src=".\jquery-easyui-1.4.3\jquery.min.js"></script>
    <script src=".\jquery-easyui-1.4.3\jquery.easyui.min.js"></script>
    <script src=".\jquery-easyui-1.4.3\locale\easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        ///js智能提示
        /// <reference path="".\jquery-easyui-1.4.3\jquery.min.js"/>
        /// <reference path=".\jquery-easyui-1.4.3\jquery.easyui.min.js"/>

    </script>

</head>
<body>
	<h2>Cell Editing in DataGrid</h2>
	<p>Click a cell to start editing.</p>
	<div style="margin:20px 0;"></div>
	
	<table id="dg" class="easyui-datagrid" title="Cell Editing in DataGrid" style="width:700px;height:auto"
			data-options="
				iconCls: 'icon-edit',
				singleSelect: true,
				url: 'datagrid_data1.json',
				method:'get',
				onClickCell: onClickCell
			">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100,editor:'text'">Product</th>
				<th data-options="field:'listprice',width:80,align:'right',formatter:format,editor:{type:'numberbox',options:{precision:1}}">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
				<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
				<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
			</tr>
		</thead>
	</table>
 
	<script type="text/javascript">
	    $.extend($.fn.datagrid.methods, {
	        editCell: function (jq, param) {
	            return jq.each(function () {
	                var opts = $(this).datagrid('options');
	                var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
	                for (var i = 0; i < fields.length; i++) {
	                    var col = $(this).datagrid('getColumnOption', fields[i]);
	                    col.editor1 = col.editor;
	                    if (fields[i] != param.field) {
	                        col.editor = null;
	                    }
	                }
	                $(this).datagrid('beginEdit', param.index);
	                for (var i = 0; i < fields.length; i++) {
	                    var col = $(this).datagrid('getColumnOption', fields[i]);
	                    col.editor = col.editor1;
	                }
	            });
	        }
	    });

	    var editIndex = undefined;
	    function endEditing() {
	        if (editIndex == undefined) { return true }
	        if ($('#dg').datagrid('validateRow', editIndex)) {
	            $('#dg').datagrid('endEdit', editIndex);
	            editIndex = undefined;
	            return true;
	        } else {
	            return false;
	        }
	    }
	    function onClickCell(index, field) {
	        if (endEditing()) {
	            $('#dg').datagrid('selectRow', index)
						.datagrid('editCell', { index: index, field: field });
	            editIndex = index;
	        }
	    }

	    function format(val, row) {
	        if (val && val != 0) {
	            return "<span>" + val + "%</span>";
	        }
	    }
	</script>
</body>
</html>